<template>
  <div>
    <el-container>
      <el-aside width="265px">
       <div class="plr-4">
          <div class="app_card mb-2 pt-4  pb-4" style="height:calc(100vh - 180px);overflow-y: scroll;">
            <el-tree :data="dataOfGroups" node-key="id" :props="defaultProps" @node-click="onClickNode" />
          </div>
        </div>
      </el-aside>
      <el-main>
        <div class="app_card mb-2 pt-4 pb-4">
          <div class="d-flex justify-content-between align-items-center">
            <div class="flex-grow-1 d-flex">
              <el-radio-group class="radio_button mr-5" v-model="radioFloor" @change="floorChange">
                <el-radio-button label="-1">全部</el-radio-button>
                <el-radio-button label="-2">上课中</el-radio-button>
                <el-radio-button label="-3">故障教室</el-radio-button>
              </el-radio-group>
              <el-checkbox v-model="automaticPolling" label="自动轮询" />
            </div>
            <div class="d-flex">
              <el-radio-group v-model="radioIcon" @change="switchIcon">
                <el-radio label="1">4画面</el-radio>
                <el-radio label="2">6画面</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <!-- 还不清数用户视屏是什么方式显示后期可参考此方法
  https://juejin.cn/post/7250284063210373178?searchId=20231028232942FA246904271D45C2A053 -->
        <div class="app_card pt-4  pb-5">
          <div style="height:calc(100vh - 300px);overflow-y: scroll;">
            <el-row :gutter="15" class="w100">
              <el-col class="mb-3 p_relative" :xs="12" :sm="12" :lg="radioIcon == '1' ? { span: col12 } : { span: col8 }" v-for="(item, index) in dataOfTable" :key="index">
                <div class="class_name">{{item.name}}</div>
                <video class="w100 rounded-4" height="240" controls>
                  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
                  Your browser does not support the video tag.
                </video>
              </el-col>
            </el-row>
          </div>
          <div class="mt-2">
            <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.pageSize" :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout" :total="paginationOption.total" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
          </div>
        </div>



        <div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
/**
 * 教室管理
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';

//组件

// ======================================================
//                      变量声明
// ======================================================





const authStore = useAuthStore();


// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryParam = ref({
  q: '',
  search: '',
  orderby: '',
  group_id: 0,
  page: 1,
  pageSize: 10,
})
// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [10, 20, 50, 100, 500, 1000],
  total: 0,
})
// 教室分组数据
const dataOfGroups = ref([]);
const defaultProps = {
  children: 'children',
  label: 'label',
}
//1大图 2小图
const radioFloor = ref('-1');
const radioIcon = ref('1');
const col12 = ref(12);
const col8 = ref(8);



// 分页栏配置数据

const automaticPolling = ref(false);





// ======================================================
//                      点击操作
// ======================================================
const floorChange = () => {
  if (radioFloor.value == "-2") {//上课
  } else if (radioFloor.value == "-3") {//故障教室
  } else if (radioFloor.value == "-1") {//全部
  } else {

  }
}
const buttonTypeChange = () => {
  if (radioFloor.value == "-2") {//上课
  } else if (radioFloor.value == "-1") {//下课
  } else {

  }
}
const switchIcon = () => {
  loadData();

}

//切换教室模式
const switchSelect = () => {
  loadData();
}


// 点击分组树形节点
const onClickNode = (data) => {
  console.log('点击树形节点', data)
  queryParam.value.class_id = data.id;
  loadData();




}



// ======================================================
//                      处理事件
// ======================================================

const loadTreeData = () => {
  EsAjax.post(ApiUrls.roomData).then(res => {
    console.error('roomDatagrid====', res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    dataOfGroups.value = res.data.data;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

// 处理分页尺寸
const handleChangeSize = (val) => {
  console.log(`${val} items per page`);
  queryParam.value.page = 1;
  queryParam.value.pageSize = val;
  loadData();
}

// 处理页码
const handleChangeCurrent = (val) => {
  console.log(`current page: ${val}`)
  queryParam.value.page = val;
  loadData();
}

// ======================================================
//                      处理事件
// ======================================================

const loadData = () => {

  // roomFault
  EsAjax.post(ApiUrls.roomBusy, queryParam.value).then(res => {
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    console.log(res.data.data)
    dataOfTable.value = res.data.data.data;
    paginationOption.value.total = res.data.data.total;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}


onMounted(() => {
  loadData();
  loadTreeData();
})

</script>
<style lang="less" scoped>
.class_name {
  position: absolute;
  font-size: 20px;
  left: 30px;
  top: 10px;
  font-weight: bold;
}

</style>

